<template>
  <div class="Register">
    <div class="login-box">
      <p data-v-032893be class="title">欢迎注册</p>
      <el-tabs v-model="activeName">
        <!-- 求职者注册 -->
        <el-tab-pane label="我要找工作" name="user">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="0"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm.name"
                auto-complete="off"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="tel">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm.tel"
                auto-complete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm.email"
                auto-complete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass" v-if="visible">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="显示密码"
                  @click="changePass('show')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_kai"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass" v-else>
              <el-input
                type="text"
                v-model="ruleForm.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="隐藏密码"
                  @click="changePass('hide')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_bi"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="morepass" v-if="visible">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm.morepass"
                auto-complete="off"
                placeholder="请再次输入密码"
              >
                <i
                  slot="suffix"
                  title="显示密码"
                  @click="changePass('show')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_kai"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="morepass" v-else>
              <el-input
                type="text"
                v-model="ruleForm.morepass"
                auto-complete="off"
                placeholder="请再次输入密码"
              >
                <i
                  slot="suffix"
                  title="隐藏密码"
                  @click="changePass('hide')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_bi"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="logining"
                :disabled="true"
                v-if="!isLog"
                @click="registerForm('ruleForm')"
                style="width: 100%"
                >注册</el-button
              >
              <el-button
                type="primary"
                :loading="logining"
                v-else-if="isLog"
                @click="registerForm('ruleForm')"
                style="width: 100%"
                >注册</el-button
              >
              <!-- <p class="login" @click="gotoLogin">已有账号？立即登录</p> -->
            </el-form-item>
            <el-form-item class="login">
              <label id="showPasswordToggle">
                <el-checkbox v-model="checked" id="showPasswordCheck"
                  >已阅读并同意《服务协议》</el-checkbox
                >
              </label>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 企业注册 -->
        <el-tab-pane label="我要招聘" name="company">
          <el-form
            :model="ruleForm2"
            status-icon
            :rules="rules"
            ref="ruleForm2"
            label-width="0"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.name"
                auto-complete="off"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="account">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.account"
                auto-complete="off"
                placeholder="请输入企业账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="tel">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.tel"
                auto-complete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.email"
                auto-complete="off"
                placeholder="请输入企业邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item prop="address">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.address"
                auto-complete="off"
                placeholder="请输入企业地址"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass" v-if="visible">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm2.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="显示密码"
                  @click="changePass('show')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_kai"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass" v-else>
              <el-input
                type="text"
                v-model="ruleForm2.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="隐藏密码"
                  @click="changePass('hide')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_bi"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="morepass" v-if="visible">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm2.morepass"
                auto-complete="off"
                placeholder="请再次输入密码"
              >
                <i
                  slot="suffix"
                  title="显示密码"
                  @click="changePass('show')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_kai"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="morepass" v-else>
              <el-input
                type="text"
                v-model="ruleForm2.morepass"
                auto-complete="off"
                placeholder="请再次输入密码"
              >
                <i
                  slot="suffix"
                  title="隐藏密码"
                  @click="changePass('hide')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_bi"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="logining"
                :disabled="true"
                v-if="!isLog"
                @click="registerForm2('ruleForm2')"
                style="width: 100%"
                >注册</el-button
              >
              <el-button
                type="primary"
                :loading="logining"
                v-else-if="isLog"
                @click="registerForm2('ruleForm2')"
                style="width: 100%"
                >注册</el-button
              >
              <!-- <p class="login" @click="gotoLogin">已有账号？立即登录</p> -->
            </el-form-item>
            <el-form-item class="login">
              <label id="showPasswordToggle">
                <el-checkbox v-model="checked" id="showPasswordCheck"
                  >已阅读并同意《服务协议》</el-checkbox
                >
              </label>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Register',
  data() {
    validateName
    // <!--验证企业账号-->
    let validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入企业账号'))
      } else {
        callback()
      }
    }
    // <!--验证用户名-->
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    // <!--验证手机号是否合法-->
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      }
      // else if (!this.checkMobile(value)) {
      //   callback(new Error('请输入正确的11位手机号码'))
      // }
      else {
        callback()
      }
    }
    // <!--验证邮箱是否合法-->
    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电子邮箱'))
      } else {
        callback()
      }
    }
    // <!--验证企业地址是否合法-->
    let validateAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入企业地址'))
      } else {
        callback()
      }
    }

    return {
      //用户信息
      ruleForm: {
        name: '',
        tel: '',
        email: '',
        pass: '',
        morepass: '',
      },
      //企业信息
      ruleForm2: {
        name: '',
        account: '',
        tel: '',
        email: '',
        address: '',
        pass: '',
        morepass: '',
      },
      //信息校验
      rules: {
        account: [
          { required: true, message: '请输入企业账号', trigger: 'blur' },
          {
            pattern: /^(?!(\d+)$)[a-zA-Z\d_]{4,20}$/,
            message: '企业账号长度4-20，可包括数字、字母、下划线',
            trigger: 'blur',
          },
          { validator: validateAccount, trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            // pattern: /^(?!(\d+)$)[a-zA-Z\d_]{4,20}$ \|\|[\u4e00-\u9fa5]{2,5}/,
            // message: '用户名长度4-20，可包括数字、字母、下划线',
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_+]{2,20}$/,
            message: '用户名长度2-20，可包括中文、数字、字母、下划线',
            trigger: 'blur',
          },
          { validator: validateName, trigger: 'blur' },
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: '密码长度为6-20位，可以为数字、字母',
            trigger: 'blur',
          },
          { validator: validatePass, trigger: 'blur' },
        ],
        morepass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: '密码长度为6-20位，可以为数字、字母',
            trigger: 'blur',
          },
          { validator: validatePass, trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: '请输入正确的11位手机号码',
            trigger: 'blur',
          },
          { validator: validateTel, trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: '请输入正确的电子邮箱',
            trigger: 'blur',
          },
          { validator: validateEmail, trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入企业地址', trigger: 'blur' },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9d+]{2,20}$/,
            message: '地址长度2-20，可包括中文、数字、字母、下划线',
            trigger: 'blur',
          },
          { validator: validateAddress, trigger: 'blur' },
        ],
      },
      activeName: 'user',
      flag: true,
      visible: true,
      checked: true,
      disabled: 0,
      isLog: false,
      isLogin: false,
      logining: false,
    }
  },
  watch: {
    //账号验证btn按钮显示高亮
    ruleForm: {
      handler: function () {
        if (this.ruleForm.tel != '' && this.ruleForm.pass != '') {
          this.isLog = true
        } else {
          this.isLog = false
        }
      },
      deep: true,
    },
    ruleForm2: {
      handler: function (val, oldval) {
        // console.log(oldval)
        if (this.ruleForm2.account != '' && this.ruleForm2.pass != '') {
          this.isLog = true
        } else {
          this.isLog = false
        }
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
  },
  created() {
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName
    }
    // console.log(this.$route.query);
  },
  methods: {
    dateHandle() {
      let date1 = new Date().toLocaleDateString().split('/').join('-')
      let date2 = new Date().toTimeString().split(' ')[0]
      let date = date1.concat(' ', date2)
      // console.log(date)
    },
    //密码判断渲染，true:暗文显示，false:明文显示
    changePass(value) {
      // console.log(123)
      this.visible = !(value === 'show')
    },
    // <!--用户提交注册-->
    registerForm(formName) {
      let date1 = new Date().toLocaleDateString().split('/').join('-')
      let date2 = new Date().toTimeString().split(' ')[0]
      let date = date1.concat(' ', date2)
      const data = {
        uname: this.ruleForm.name,
        upassword: this.ruleForm.pass,
        uphone: this.ruleForm.tel,
        umailbox: this.ruleForm.email,
        uregisterdate: date,
        ulevel: 1,
        ustatus: 2,
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm, data)
          this.$request
            .post('/api/api/UserInfo/RegisterSelect', {
              uphone: this.ruleForm.tel,
            })
            .then((res) => {
              // console.log(res)
              if (res.code === 1 && this.ruleForm.tel == res.data.uphone) {
                this.$message({
                  message: '该账号已存在，请勿重复注册！',
                  type: 'error',
                })
              } else {
                this.$request
                  .post('/api/api/UserInfo/Add', data)
                  .then((res) => {
                    this.logining = true
                    this.$message({
                      message: '注册成功！待管理员审核完毕方可登录',
                      type: 'success',
                    })
                    setTimeout(() => {
                      this.$router.push({
                        path: '/login',
                      })
                    }, 400)
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              }
            })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // <!--企业提交注册-->
    registerForm2(formName) {
      let date1 = new Date().toLocaleDateString().split('/').join('-')
      let date2 = new Date().toTimeString().split(' ')[0]
      let date = date1.concat(' ', date2)
      const data = {
        cname: this.ruleForm2.name,
        caccount: this.ruleForm2.account,
        cpassword: this.ruleForm2.pass,
        cphone: this.ruleForm2.tel,
        cmailbox: this.ruleForm2.email,
        caddress: this.ruleForm2.address,
        cregisterdate: date,
        clevel: 5,
        cstatus: 2,
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm2, data)
          this.$request
            .post('/api/api/ZpCompany/RegisterSelect', {
              caccount: this.ruleForm2.account,
            })
            .then((res) => {
              // console.log(res)
              if (
                res.code === 1 &&
                this.ruleForm2.account == res.data.caccount
              ) {
                this.$message({
                  message: '该账号已存在，请勿重复注册！',
                  type: 'error',
                })
              } else {
                this.$request
                  .post('/api/api/ZpCompany/Add', data)
                  .then((res) => {
                    // console.log(res)
                    this.logining = true
                    this.$message({
                      message: '企业注册成功！待管理员审核完毕方可登录',
                      type: 'success',
                    })
                    setTimeout(() => {
                      this.$router.push({
                        path: '/login',
                      })
                    }, 400)
                  })
              }
            })
          // this.$request
          //   .post('/api/api/ZpCompany/Add', data)
          //   .then((res) => {
          //     console.log(res)
          //     this.logining = true
          //     this.$message({
          //       message: '企业注册成功！待管理员审核完毕方可登录',
          //       type: 'success',
          //     })
          //     setTimeout(() => {
          //       this.$router.push({
          //         path: '/login',
          //       })
          //     }, 400)
          //   })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 验证手机号
    // checkMobile(str) {
    //   let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    //   if (reg.test(str)) {
    //     return true
    //   } else {
    //     return false
    //   }
    // },
  },
}
</script>
 
<style scoped>
.Register {
  background: url('../../assets/image/newbg.png');
  background-size: 100% 100%;
  background-color: #5dd5c8;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.login-box {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  margin: 0;
  padding: 15px 35px;
  box-sizing: border-box;
  border-radius: 0.5em;
  font-family: 'Source Sans Pro', sans-serif;
}
.title {
  font-size: 20px;
  line-height: 50px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.el-tabs__header {
  margin: 0 0 30px 0;
}
.el-tabs__nav-wrap::after {
  height: 0;
}
#tab-first::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 20px;
  background-color: #dcdfe6;
  margin: 8px 0;
  vertical-align: middle;
}
.code .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code button {
  margin-left: 20px;
  width: 140px;
  text-align: center;
}
.el-form-item:last-child {
  margin-bottom: 6px;
}
.el-button--primary:focus {
  background: #5dd5c8;
  border-color: #5dd5c8;
  color: #ffffff;
}
.el-input__suffix-inner {
  margin-right: 6px;
}
.login {
  margin-top: -15px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.gotoRight {
  float: right;
  color: #999999;
}
.gotoRight span:hover {
  color: #5dd5c8;
}
</style>